// Vanilla Stats
.toolbar-stats {
    flex-wrap: wrap;
    justify-content: space-between;

    > * {
        margin-left: auto;
        margin-right: auto;
    }

    .toolbar-stats-slot {
        margin-top: $spacer * 2;

        @include media-breakpoint-down(md) {
            margin-top: $spacer;
        }
    }

    .toolbar-stats-date-picker {
        display: flex;
        flex-wrap: wrap;
        margin-top: $spacer;

        @include media-breakpoint-down(md) {
            margin-top: 0;
        }

        > * {
            margin-top: $spacer;
            margin-left: auto;
            margin-right: auto;
        }

        .filter-date {
            padding-left: $spacer * 0.5;
            padding-right: $spacer * 0.5;
            min-width: 210px + $spacer;

            &:after {
                right: 9px + $spacer * 0.5;
            }
        }
    }
}

// Analytics
.analytics-panel {
    @include list-reset;
}

.analytics-widget {
    position: relative;
}

//Options
.analytics-widget-options {
    position: absolute;
    right: 0;
    top: $spacer;
}

.analytics-widget-header {
    .title {
        @extend h2;
    }
}

.analytics-widget-metric {
    .analytics-widget-options {
        right: $spacer * 0.5;
        top: 0;
    }
}

// Bookmark Icons
.bookmark {
    @extend .btn-icon;
    @extend .btn-icon-sm;
}

.bookmarked {
    svg {
        transform: rotate(30deg);
    }
}

.analytics-widget-move {
    margin-left: 10px;
    cursor: move;

    &::before {
        color: $grey;
        @include icon;
        @include char-content("\f1db");
    }
}

.analytics-panel-metrics {
    @include full-border;
    @extend .nav-stats;
    overflow: hidden;

    justify-content: center;
    flex-wrap: wrap;

    padding: ($spacer * 0.5) 0 $spacer;

    .metric-value {
        text-align: center;
        @extend .nav-stats-value;
        color: $grey;
    }

    .metric-title {
        text-align: center;
        @extend .nav-stats-title;
        color: $grey;
    }

    .analytics-widget-metric {
        @extend .nav-stats-item;
        padding: $spacer ($spacer * 2) !important;
        margin-top: ($spacer * 0.5);
        min-width: 180px;

        &:last-child {
            border-right: 0;
        }
    }

    &:empty {
        display: none;
    }
}

.keen-spinner > div > div {
    width: 5px !important;
    height: 1px !important;
}

// Hide the toolbar filter button when the panel is visible
.toolbar .filter-category {
    display: none;

    svg {
        transform: scale(0.75);
    }
}

@include media-breakpoint-down(md) {
    .toolbar .filter-category {
        display: block;
    }
}

.table-summary-cell-position-change svg {
    margin-top: -4px;

    .rise & {
        color: $brand-success;
    }

    .fall & {
        color: $brand-danger;
    }
}
